function createResizeBar(dir) {
  let moveDom = document.createElement('div')

  moveDom.setAttribute('class', `ide-resizer ide-resize-${dir}`)

  return moveDom
}

export default {
  bind(el, binging) {
    el.style.position = 'relative'
    let moveDom = createResizeBar(binging.value[0] || 'right')

    el.appendChild(moveDom)

    moveDom.onmousedown = e => {
      let startX = e.clientX;
      let startY = e.clientY;
      e.preventDefault();

      document.onmousemove = (e) => {
        let x = e.clientX
        let y = e.clientY
        let disX = x - startX;
        let disY = y - startY;

        let elWidth = el.offsetWidth // parseInt(el.style.width);
        let elHeight = el.offsetHeight // parseInt(el.style.width);
        
        el.style.width = elWidth + disX + "px";
        el.style.Height = elHeight + disY + "px";
  
        startX = x;
        startY = y;
      }

      document.onmouseup = () => {
        document.onmouseup = null;
        document.onmousemove = null;
      };
    }
  },
  unbind() {
    
  }
}
